<template>
  <contents :heightInclude="['tabBar']" class="commonSites_page">
    <u-form
      :model="form"
      ref="form"
      label-width="220"
      :label-style="{ paddingRight: '15rpx' }"
    >
      <u-form-item label-width="750" :label="$t('locales.currentlyUsed')"> </u-form-item>
      <u-radio-group>
        <u-form-item :label="siteName" class="radio">
          <u-radio slot="right"></u-radio>
        </u-form-item>
      </u-radio-group>
    </u-form>
    <u-gap height="20" bg-color="#f7f4f8"></u-gap>
    <u-form
      :model="form"
      ref="form"
      label-width="220"
      :label-style="{ paddingRight: '15rpx' }"
      class="form"
    >
      <u-form-item :label="$t('locales.otherSites')" style="padding: 20rpx 30rpx"> </u-form-item>
      <u-radio-group v-model="form.id">
        <view
          v-for="item in list"
          :key="item.id"
          @click="form.id = item.id"
          :class="form.id === item.id ? 'radio-active' : ''"
          style="padding: 0 30rpx"
        >
          <u-form-item
            :label="item.siteName"
            :class="form.id === item.id ? 'radio-active radio' : 'radio'"
          >
            <u-radio slot="right" :name="item.id"></u-radio>
          </u-form-item>
        </view>
      </u-radio-group>
    </u-form>
    <SubmitBtn @click="submit" />
  </contents>
</template>
<script>
import SubmitBtn from '@/components/submitBtn'
import { siteList, setCommonUseSite } from '@/api/http/home'
export default {
  components: {
    SubmitBtn
  },
  data() {
    return {
      list: [],
      siteName: '',
      form: {
        id: ''
      }
    }
  },
  onLoad() {
    this.getData()
    this.form = this.$storage.get('site')
    this.siteName = this.$storage.get('site').siteName
  },
  methods: {
    getData() {
      siteList({
        enable: 1,
        type: 1
      }).then((res) => {
        if (res.code === 200) {
          this.list = res.data
        }
      })
    },
    submit() {
      setCommonUseSite({
        ...this.form
      }).then((res) => {
        if (res.code === 200) {
          let siteInfo = {}
          this.list.map((item) => {
            if (item.id === this.form.id) {
              siteInfo = item
            }
          })

          this.$storage.set('site', siteInfo)
          this.$store.commit('SET_DOMAIN')
          this.$store.dispatch('Currency', {
            domainPrefix: this.$store.getters.domainPrefix || ''
          })
          this._i18n.locale = siteInfo.languageCode
          console.log(JSON.stringify(siteInfo))
          this.$storage.set('language', siteInfo.languageCode)
          const tabLocales = this.$t('locales')
          uni.setTabBarItem({
            index: 0,
            text: tabLocales['pages/index/indexHome/index']
          })
          uni.setTabBarItem({
            index: 1,
            text: tabLocales['pages/sort/index']
          })
          uni.setTabBarItem({
            index: 2,
            text: tabLocales['pages/shoppingCart/index']
          })
          uni.setTabBarItem({
            index: 3,
            text: tabLocales['pages/me/index']
          })
          // #ifdef APP-PLUS
          uni.reLaunch({
            url: '/pages/index/home/index'
          })
          // #endif

          // #ifdef H5
          window.location.href = siteInfo.siteUrl
          // #endif
        }
        uni.showToast({
          icon: 'none',
          title: res.message
        })
      })
    }
  }
}
</script>
<style lang="scss">
.commonSites_page {
  .u-form {
    padding: 0 30rpx;
    background-color: #fff;

    .title {
      .u-form-item--left__content__label {
        width: 750rpx;
      }
    }
  }

  .form {
    padding: 0
  }
}

.radio {
  width: 690rpx;
}

.radio-active {
  background-color: #e8f2ff;
}

</style>